<template>
  <div class="Echarts">
    <div id="main" style="width: 500px; height: 300px"></div>
  </div>
</template>

<script>
import { getPoint } from '@/api/article'
export default {
  // props: ['Point'],
  data () {
    return {
      Point: []
    }
  },
  async beforeCreate () {
    const Point = await getPoint()
    console.log(Point);
    this.Point = Point
    await this.myEcharts()
  },
  methods: {
    myEcharts () {
      console.log(this.Point)
      const myChart = this.$echarts.init(document.getElementById('main'))
      // 配置图表
      const option = {
        // legend: {
        //   orient: 'vertical',
        //   top: 'center',
        //   right: '5%',
        //   data: [this.Point[0].name, this.Point[1].name, this.Point[2].name, this.Point[3].name, this.Point[4].name],
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 16
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['40%', '50%'],
            roseType: 'radius',
            label: {
              show: true,
              normal: {
                position: 'outside',
                fontSize: 14
              }
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true
            },
            data: [
              {
                value: this.Point[0].value,
                name: this.Point[0].name,
                itemStyle: {
                  color: 'rgba(50,123,250,0.7)'
                }
              },
              {
                value: this.Point[1].value,
                name: this.Point[1].name,
                itemStyle: {
                  color: 'rgba(244,201,7,0.7)'
                }
              },
              {
                value: this.Point[2].value,
                name: this.Point[2].name,
                itemStyle: {
                  color: 'rgba(23,216,161,0.7)'                  
                }
              },
              {
                value: this.Point[3].value,
                name: this.Point[3].name,
                itemStyle: {
                  color: 'rgba(122,60,235,0.7)'                
                }
              },
              {
                value: this.Point[4].value,
                name: this.Point[4].name,
                itemStyle: {
                  color: 'rgba(15,197,243,0.7)'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style></style>